<template>
  <div>
    <el-dialog
      :visible="visible"
      :title="title"
      :width="width"
      append-to-body
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="depotDataForm"
        :model="depotDataForm"
        label-width="125px"
        :disabled="operation === 0"
        label-position="left"
        label-suffix=":"
      >
        <h3 style="margin-top: -10px">{{ $t('problemItemLang.problemInfo') }}</h3>
        <div style="margin-left: 30px">
          <el-descriptions :column="3" item-class-name="item-with-margin" border>
            <el-descriptions-item :label="$t('goodsSKULang.warehouseOutDocNo')">
              {{ depotDataForm.orderNo }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('depotLang.depot')">{{ depotDataForm.depotName }}</el-descriptions-item>
            <el-descriptions-item :label="$t('cutOffOrderLang.createDate')">{{ depotDataForm.gmtCreated }}</el-descriptions-item>
            <el-descriptions-item :label="$t('statusLang.status')" :span="2">{{ $t("statusLang." + getTitleByValue(statusOptions, depotDataForm.issueStatus)) }}</el-descriptions-item>
            <el-descriptions-item :label="$t('cutOffOrderLang.creator')">{{ depotDataForm.createdUserName }}</el-descriptions-item>
            <el-descriptions-item :label="$t('problemItemLang.problemType')" :span="2">{{ $t(getTitleByValue(problemTypeOptions, depotDataForm.issueType)) }}</el-descriptions-item>
            <el-descriptions-item :label="$t('problemItemLang.handler')">{{ depotDataForm.handleUserName }}</el-descriptions-item>
            <el-descriptions-item :label="$t('problemItemLang.problemDesc')" :span="2">{{ depotDataForm.issueDesc }}</el-descriptions-item>
            <el-descriptions-item :label="$t('problemItemLang.handleDate')">{{ depotDataForm.handleTime }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions style="margin-top: 20px">
            <el-descriptions-item :label="$t('unownedGoodsLang.pic')">
              <div class="image-list">
                <el-image
                  v-for="image in depotDataForm.issuePicList"
                  :key="image"
                  :src="image"
                  class="uploaded-image"
                  :preview-src-list="depotDataForm.issuePicList"
                  fit="cover"
                />
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <!--订单信息-->
        <h3 style="margin-top: -10px">{{ $t('cutOffOrderLang.orderInfo') }}</h3>
        <div style="margin-left: 30px">
          <el-descriptions :column="2" border>
            <el-descriptions-item :label="$t('goodsSKULang.warehouseOutDocNo')" :span="2">{{ depotDataForm.outboundOrderDetail.orderNo }}</el-descriptions-item>
            <el-descriptions-item :label="$t('destructionLang.source')">{{ depotDataForm.outboundOrderDetail.source }}</el-descriptions-item>
            <el-descriptions-item :label="$t('outboundOrderLang.orderType')">{{ depotDataForm.outboundOrderDetail.orderVoteTypeName }}</el-descriptions-item>
            <el-descriptions-item :label="$t('problemItemLang.rigDocNo')">{{ depotDataForm.outboundOrderDetail.platformOrderNo }}</el-descriptions-item>
            <el-descriptions-item :label="$t('materialsLang.packageMaterial')">{{ null }}</el-descriptions-item>
            <el-descriptions-item :label="$t('problemItemLang.providerTransNo')">{{ depotDataForm.outboundOrderDetail.providerTrackingNo }}</el-descriptions-item>
            <el-descriptions-item :label="$t('harvestLang.logisticsProducts')">{{ depotDataForm.outboundOrderDetail.channelName }}</el-descriptions-item>
            <el-descriptions-item :label="$t('unitLang.weight')">{{ depotDataForm.outboundOrderDetail.weight }}</el-descriptions-item>
            <el-descriptions-item :label="$t('outboundOrderLang.countryOfDestination')">{{ depotDataForm.outboundOrderDetail.regionName }}</el-descriptions-item>
            <el-descriptions-item :label="$t('unitLang.size')">{{ depotDataForm.outboundOrderDetail.volume }}</el-descriptions-item>
            <el-descriptions-item :label="$t('harvestLang.providerChannel')">{{ depotDataForm.outboundOrderDetail.providerChannelName }}</el-descriptions-item>
            <el-descriptions-item :label="$t('unitLang.volumeWeight')">{{ depotDataForm.outboundOrderDetail.volumeWeight }}</el-descriptions-item>
            <el-descriptions-item :label="$t('warehouseEntryLang.provider')">{{ depotDataForm.outboundOrderDetail.providerName }}</el-descriptions-item>
            <el-descriptions-item :label="$t('unitLang.billingWeight')">{{ depotDataForm.outboundOrderDetail.billingWeight }}</el-descriptions-item>
            <el-descriptions-item :label="$t('unitLang.bubbleCoefficient')">{{ depotDataForm.outboundOrderDetail.bubbleCoefficient }}</el-descriptions-item>
            <el-descriptions-item :label="$t('harvestLang.customerName')">{{ depotDataForm.outboundOrderDetail.customerName }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 订单产品 -->
        <div style="margin-top: 30px">
          <el-form-item
            prop="packagingType"
            :label="$t('outboundOrderLang.orderProducts')"
          >
            <el-table :data="depotDataForm.outboundOrderDetail.goodsList" border>
              <el-table-column
                :label="$t('tableIndex')"
                min-width="30"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="goodsName"
                :label="$t('goodsSKULang.goodsName')"
                min-width="80"
                align="center"
              />
              <el-table-column
                prop="goodsSkuCode"
                :label="$t('goodsSKULang.skuCode')"
                min-width="80"
                align="center"
              />
              <el-table-column
                prop="declaredUsdPrice"
                :label="$t('goodsSKULang.declaredPrice')"
                min-width="80"
                align="center"
              />
              <el-table-column
                prop="goodsQuantity"
                :label="$t('number')"
                min-width="80"
                align="center"
              />
              <el-table-column
                prop="skuVolume"
                :label="$t('unitLang.volume')+ 'CM'"
                min-width="80"
                align="center"
              />
            </el-table>
          </el-form-item>
          <!--问题件处理-->
          <div v-if="operation == 1 || (operation === 0 && depotDataForm.issueStatus > 1)">
            <h3>{{ $t('problemItemLang.problemHandle') }}</h3>
            <el-row :gutter="10">
              <el-form-item :label="$t('problemItemLang.handleMethod')" prop="handlePlan">
                <template #label>
                  <span style="color: red;">*</span> {{ $t('problemItemLang.handleMethod') }}
                </template>
                <el-radio-group
                  v-model="param.handlePlan"
                  style="padding: 5px 15px;"
                  :disabled="operation === 0"
                  @change="handleMethodChange"
                >
                  <el-radio :label="1">{{ $t('outboundOrderLang.cancelOrder') }}</el-radio>
                  <el-radio :label="2">{{ $t('againSend') }}</el-radio>
                  <el-radio :label="3">{{ $t('supplyAgain') }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="displaySupplyOrderNo" :label="$t('problemItemLang.supplyOrderNo')" prop="resendOrderNo">
                <template #label>
                  <span style="color: red;">*</span> {{ $t('problemItemLang.supplyOrderNo') }}
                </template>
                <el-input
                  v-model="param.resendOrderNo"
                  :placeholder="$t('pleaseEnter')"
                  clearable
                  style="width: 30%;margin-left: -40px;"
                />
              </el-form-item>
              <el-form-item :label="$t('problemItemLang.payCustomer')" prop="handleMethod">
                <template #label>
                  <span style="color: red;">*</span> {{ $t('problemItemLang.payCustomer') }}
                </template>
                <el-radio-group
                  v-model="param.isCompensation"
                  style="padding: 5px 15px;"
                  :disabled="operation === 0"
                  @change="handlePayCustomer"
                >
                  <el-radio :label="1">{{ $t('yes') }}</el-radio>
                  <el-radio :label="0">{{ $t('no') }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="displayPayCustomer" :label="$t('problemItemLang.payMoney')" prop="payMoney">
                <template #label>
                  <span style="color: red;">*</span> {{ $t('problemItemLang.payMoney') }}
                </template>
                <el-input
                  v-model="param.compensationAmount"
                  :placeholder="$t('pleaseEnter')"
                  clearable
                  style="width: 30%;margin-left: -40px;"
                />
              </el-form-item>
              <el-form-item v-if="displayPayCustomer" :label="$t('problemItemLang.payReason')" prop="payReason">
                <template #label>
                  <span style="color: red;">*</span> {{ $t('problemItemLang.payReason') }}
                </template>
                <el-input
                  v-model="param.compensationReason"
                  :placeholder="$t('pleaseEnter')"
                  clearable
                  style="width: 30%;margin-left: -40px;"
                />
              </el-form-item>
              <el-form-item :label="$t('problemItemLang.forPayProvider')" prop="forPayProvider">
                <template #label>
                  <span style="color: red;">*</span> {{ $t('problemItemLang.forPayProvider') }}
                </template>
                <el-radio-group
                  v-model="param.isClaim"
                  style="padding: 5px 15px;"
                  :disabled="operation === 0"
                  @change="handleForPayProvider"
                >
                  <el-radio :label="1">{{ $t('yes') }}</el-radio>
                  <el-radio :label="0">{{ $t('no') }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-form-item v-if="displayDemandProvider" :label="$t('problemItemLang.demandMoney')" prop="demandMoney">
              <template #label>
                <span style="color: red;">*</span> {{ $t('problemItemLang.demandMoney') }}
              </template>
              <el-input
                v-model="param.claimAmount"
                :placeholder="$t('pleaseEnter')"
                clearable
                style="width: 30%;margin-left: -40px;"
              />
            </el-form-item>
            <el-form-item v-if="displayDemandProvider" :label="$t('problemItemLang.demandReason')" prop="demandReason">
              <template #label>
                <span style="color: red;">*</span> {{ $t('problemItemLang.demandReason') }}
              </template>
              <el-input
                v-model="param.claimReason"
                :placeholder="$t('pleaseEnter')"
                clearable
                style="width: 30%;margin-left: -40px;"
              />
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button type="warning" plain size="small" @click="close">{{
          $t("cancel")
        }}</el-button>
        <el-button
          v-if="operation === 1"
          type="primary"
          size="small"
          :loading="submitLoading"
          @click="handleSubmit"
        >{{ $t("submit") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  problemHandleTypeOptionDict, problemItemStatusOptionDict, problemTypeOptionDict
} from '@/utils/dictData'
import { getDictOptionList, getTitleByValue } from '@/utils/dictUtils'
import { getIssueInfo, issueHandle } from '@/api/business/operateManage/problemItem'
export default {
  name: 'DepotForm',
  props: {
    value: {
      type: Number,
      default: undefined
    },
    visible: {
      type: Boolean,
      default: undefined
    },
    operation: {
      type: Number,
      default: 0 // 0查看 1新增 2修改
    },
    title: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: '70%'
    }
  },
  data() {
    return {
      displaySupplyOrderNo: false,
      displayPayCustomer: false,
      displayDemandProvider: false,
      param: {
        issueId: null,
        handlePlan: 1,
        isCompensation: 0,
        isClaim: 0,
        resendOrderNo: null,
        compensationAmount: null,
        compensationReason: null,
        claimAmount: null,
        claimReason: null
      },
      handleTypeOptions: getDictOptionList(problemHandleTypeOptionDict),
      statusOptions: getDictOptionList(problemItemStatusOptionDict),
      problemTypeOptions: getDictOptionList(problemTypeOptionDict), // 问题件类型
      submitLoading: false,
      getTitleByValue: getTitleByValue,
      depotDataForm: {}
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.getData()
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async handleMethodChange(data) {
      if (data === 3) {
        this.displaySupplyOrderNo = true
      } else {
        this.displaySupplyOrderNo = false
      }
    },
    async handlePayCustomer(data) {
      if (data === 1) {
        this.displayPayCustomer = true
      } else {
        this.displayPayCustomer = false
      }
    },
    async handleForPayProvider(data) {
      if (data === 1) {
        this.displayDemandProvider = true
      } else {
        this.displayDemandProvider = false
      }
    },
    async getData() {
      if (!this.value) return
      this.param.issueId = this.value
      const res = await getIssueInfo({ issueId: this.value })
      if (!res || res.data === null) return
      this.depotDataForm = res.data
      if (this.operation === 0) {
        if (this.depotDataForm.handlePlan === 2) {
          this.displaySupplyOrderNo = true
          this.param.resendOrderNo = this.depotDataForm.resendOrderNo
        }
        if (this.depotDataForm.isCompensation === 1) {
          this.displayPayCustomer = true
          this.param.compensationAmount = this.depotDataForm.compensationAmount
          this.param.compensationReason = this.depotDataForm.compensationReason
        }
        if (this.depotDataForm.isClaim === 1) {
          this.displayDemandProvider = true
          this.param.claimAmount = this.depotDataForm.claimAmount
          this.param.claimReason = this.depotDataForm.claimReason
        }
      }
    },
    // 提交
    async handleSubmit() {
      if (this.param.handlePlan.length <= 0) {
        this.$message.error(this.$t('pleaseSelect') + this.$t('problemItemLang.handleMethod'))
        return
      }
      if (this.param.handlePlan === 3) {
        if (!this.param.resendOrderNo) {
          this.$message.error(this.$t('pleaseEnter') + this.$t('problemItemLang.supplyOrderNo'))
          return
        }
      }
      if (this.param.isCompensation === 1) {
        if (!this.param.compensationAmount) {
          this.$message.error(this.$t('pleaseEnter') + this.$t('problemItemLang.payMoney'))
          return
        }
        if (!this.param.compensationReason) {
          this.$message.error(this.$t('pleaseEnter') + this.$t('problemItemLang.payReason'))
          return
        }
      }
      if (this.param.isClaim === 1) {
        if (!this.param.claimAmount) {
          this.$message.error(this.$t('pleaseEnter') + this.$t('problemItemLang.demandMoney'))
          return
        }
        if (!this.param.claimReason) {
          this.$message.error(this.$t('pleaseEnter') + this.$t('problemItemLang.demandReason'))
          return
        }
      }
      if (this.operation === 1) {
        // 处理
        const res = await issueHandle(this.param)
        if (res.data === null && res.returnCode === 10000) {
          this.$message.success(this.$t('handleSuccess'))
          this.$emit('close')
        } else {
          this.$message.error(res.returnMsg)
        }
      }
    },
    // 关闭
    close() {
      this.$emit('close')
      console.log('对话框关闭')
    },
    closed() {
      console.log('对话框完全关闭')
    }
  }
}
</script>

<style scoped>
.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.uploaded-image {
  width: 100px; /* 你可以根据需要调整图片的宽度 */
  height: 100px; /* 你可以根据需要调整图片的高度 */
  cursor: pointer;
}
.custom-descriptions .el-descriptions__label {
  text-align: right;
}
.item-with-margin {
  margin-bottom: 20px; /* 调整行间距 */
}
</style>
